<template>
  <div>
    <el-table
    :data="nowTableData"
    border
    style="width: 100%;">
    <el-table-column
      prop="date"
      label="注册日期">
    </el-table-column>
    <el-table-column
      prop="avatar"
      label="头像">
      <template slot-scope="scope">
        <img style="width:50px; height:auto" :src="scope.row.avatar" alt="">
      </template>
    </el-table-column>
    <el-table-column
      prop="username"
      label="用户姓名">
    </el-table-column>
    <el-table-column
      prop="email"
      label="用户邮箱">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作">
      <template slot-scope="scope">
        <el-button @click="handleToFreeze(scope.$index,scope.row)" type="primary" size="small">{{scope.row.isFreeze ? '已冻结':'未冻结'}}</el-button>
        <el-button @click="handleToDelete(scope.$index,scope.row)" type="danger" size="small">删除</el-button>
      </template>
    </el-table-column>
    </el-table>
    <el-pagination
    background
    layout="prev, pager, next"
    :current-page.sync="currentPage"
    :page-size="pageSize"
    :total="tableData.length">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 2
    }
  },
  computed: {
    nowTableData() {
      return this.tableData.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize) || []
    }
  },
  methods: {
    async fetch() {
      let res = await this.$axios.get('/api2/admin/usersList')
      if(res.data.status === 0) {
        this.tableData = res.data.data.usersList
      }
    },
    async handleToFreeze(index, row) {
      let res = await this.$axios.post('/api2/admin/updateFreeze', {email:row.email, isFreeze: !row.isFreeze})
      if(res && res.data.status === 0) {
        this.$alert('冻结操作成功', '信息', {
          confirmButtonText: '确定',
          callback: action => {
            this.tableData[index].isFreeze = !row.isFreeze
          }
        })
      }else{
        this.$alert('冻结操作失败', '信息', {
          confirmButtonText: '确定'
        })
      }
    },
    async handleToDelete(index, row) {
      let res = await this.$axios.post('/api2/admin/deleteUser', {email: row.email})
      console.log(row.email);
      if(res && res.data.status === 0) {
        this.$alert('删除操作成功', '信息', {
          confirmButtonText: '确定',
          callback: action => {
            this.tableData.splice(index,1)
          }
        })
      }else {
        this.$alert('删除操作失败', '信息', {
          confirmButtonText: '确定'
        })
      }
    }
  },
  mounted() {
    this.fetch()
  }
}
</script>

<style>

</style>
